<template>
  <div class="second" :class="{current:iscurrent==1}">
    <div class="shield">
      <img src="../images/shield_1.png" alt />
      <img src="../images/shield_2.png" alt />
      <img src="../images/shield_3.png" alt />
      <img src="../images/shield_4.png" alt />
      <img src="../images/shield_5.png" alt />
      <img src="../images/shield_6.png" alt />
      <img src="../images/shield_7.png" alt />
      <img src="../images/shield_8.png" alt />
      <img src="../images/shield_9.png" alt />
    </div>
    <div class="info2"></div>
  </div>
</template>

<script>
export default {
  name: "Section2",
  data() {
    return {};
  },
  props: ["iscurrent"],
  created() {}
};
</script>

<style scoped>
.second{
    position: relative;
}
.shield {
    width: 440px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-130%,-50%);
    font-size: 0;
}
.second .shield>img {
    transition: transform 0.8s,opacity 1s;
}
.shield img:nth-of-type(1) {
    transform: translate(100px, 100px) rotate(30deg);
    opacity: 0.2;
}

.shield img:nth-of-type(2) {
    transform: translate(-100px, -100px) rotate(-30deg);
    opacity: 0.2;
}

.shield img:nth-of-type(3) {
    transform: translate(200px, 200px) rotate(60deg);
    opacity: 0.2;
}

.shield img:nth-of-type(4) {
    transform: translate(-200px, -200px) rotate(-60deg);
    opacity: 0.2;
}

.shield img:nth-of-type(5) {
    transform: translate(150px, 150px) rotate(90deg);
    opacity: 0.2;
}

.shield img:nth-of-type(6) {
    transform: translate(50px, 150px) rotate(-90deg);
    opacity: 0.2;
}

.shield img:nth-of-type(7) {
    transform: translate(-150px, -150px) rotate(60deg);
    opacity: 0.2;
}

.shield img:nth-of-type(8) {
    transform: translate(10px, -250px) rotate(-90deg);
    opacity: 0.2;
}

.shield img:nth-of-type(9) {
    transform: translate(-250px, 10px) rotate(45deg);
    opacity: 0.2;
}
.second .info2 {
    width: 635px;
    height: 309px;
    background: url("../images/info_2.png");
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(0,-50%);
}
.second.current img {
    transform: none;
    opacity: 1;
}
</style>